<template>
  <div class="withdraw-progress">
    <el-tip class="withdraw-progress__tip">
      <div class="withdraw-progress__tip-inner">
        <span class="withdraw-progress__tip-text" v-if="!successDirect && checkStep !== 2">
        您的提款请求已成功提交，预计提款时间
        </span>
        <span class="withdraw-progress__tip-text" v-else>
        <!--您的提款请求出款{{isError ? '失败' : '成功'}}。-->
        您的提款请求审核完成。
        </span>
        <span class="withdraw-progress__countdown" v-if="!successDirect && checkStep !== 2">
          <svg-icon icon-class="alarm-clock" type="black"></svg-icon>
          0{{m}}:{{s>9?s:'0'+s}}
        </span>
      </div>
    </el-tip>
    <div class="withdraw-progress__main">
      <div class="withdraw-progress__steps">
        <el-steps :space="200" :active="checkStep" align-center>
          <el-step title="提交">
            <template slot="icon">
              <div class="withdraw-progress__step">
                <svg-icon icon-class="withdraw-audit"></svg-icon>
              </div>
            </template>
          </el-step>
          <el-step title="审核中">
            <template slot="icon">
              <div class="withdraw-progress__step">
                <svg-icon icon-class="withdraw-go-out"></svg-icon>
              </div>
            </template>
          </el-step>
          <el-step title="审核完成">
            <template slot="icon">
              <div class="withdraw-progress__step">
                <svg-icon icon-class="withdraw-success"></svg-icon>
              </div>
            </template>
          </el-step>
          <!--<el-step :title="isError ? '提现失败' : '提现成功'" :status="isError ? 'error' : ''">-->
            <!--<template slot="icon">-->
              <!--<div class="withdraw-progress__step">-->
                <!--<svg-icon icon-class="withdraw-success"></svg-icon>-->
              <!--</div>-->
            <!--</template>-->
          <!--</el-step>-->
        </el-steps>
      </div>

      <!--<div class="withdraw-progress__order">-->
      <!--<span class="withdraw-progress__order-cell">提款方式：{{lastStatus.bankName}}</span>-->
      <!--<span class="withdraw-progress__order-cell">提款金额：{{lastStatus.amount | currency}}</span>-->
      <!--<span class="withdraw-progress__order-cell">订单编号：{{lastStatus.orderId}}</span>-->
      <!--</div>-->
      <div class="withdraw-progress__order">
        <div class="withdraw-progress__all-order" v-if="lastStatus.length > 1" @click="showList = !showList">
          <div class="withdraw-progress__all-order-cell">
            <span>提款总额：{{allAmount}}</span>
            <span>手续费：{{allFee}}</span>
          </div>
          <div class="withdraw-progress__all-order-cell">提款时间：{{withdrawTime | toTime}}</div>
          <div class="withdraw-progress__all-order-cell">提款方式：{{allBankName}}</div>
          <div class="withdraw-progress__all-order-cell">提款卡号：{{cardNumber}}</div>
          <div class="withdraw-progress__all-order-cell">提款状态：<span v-html="formatStatus"></span></div>
          <div class="withdraw-progress__all-more">
            <span>查看更多</span>
            <div class="withdraw-progress__all-icon" :class="[showList ? 'el-icon-d-arrow-right' : 'el-icon-d-arrow-left']"></div>
          </div>
        </div>
        <div v-show="showList">
          <div class="withdraw-progress__order-info" v-if="lastStatus.length > 1">
            为了您的资金安全，系统自动将订单拆分为<span>{{lastStatus.length}}</span>笔，请您查收。
          </div>
          <div class="withdraw-progress__order-list">
            <div class="withdraw-progress__order-item" v-for="(item,index) in lastStatus" :key="index">
              <span class="withdraw-progress__order-cell">提款金额：{{item.amount | currency}}</span>
              <span class="withdraw-progress__order-cell">交易时间：{{item.createDate | toTime}}</span>
              <span class="withdraw-progress__order-cell">订单编号：{{item.orderId}}</span>
              <span class="withdraw-progress__order-cell">提款方式：{{item.bankName}}</span>
              <span class="withdraw-progress__order-cell">提款状态：<span v-html="withdrawStatus(Number(item.status))"></span></span>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="withdraw-progress__customer">
      提现过程中若遇到任何问题？
      <customer-service class="withdraw-progress__customer-btn">
        <svg-icon type="primary" icon-class="custom1"></svg-icon>
        联系在线客服
      </customer-service>
    </div>
  </div>
</template>

<script>
  export default {
    name: "withdraw-progress",

    props: ['lastStatus'],

    data() {
      return {
        successDirect: true,
        timer: undefined,
        settime: undefined,
        m: 4,
        s: 59,
        // isError: false,
        checkStep: 1,
        cardNumber: this.lastStatus[0].cardNo,
        withdrawTime: this.lastStatus[0].createDate,
        allBankName:this.lastStatus[0].bankName,
        showList:this.lastStatus.length === 1,
      };
    },

    created: function () {
      this.getInfo()  //定义方法
    },
    watch: {
      lastStatus() {
        this.getInfo()
      }
    },
    methods: {
      // getInfo() {
      //   _.each(this.lastStatus, item => {
      //     if (_.includes(consts.WITHDRAW_STATUS_PAYMENT_OUT_ING, item.status)) {
      //       // this.checkStep = true;
      //       this.checkStep = 1;
      //     }
      //   });
      // },
      // getInfo() {
      //   _.each(this.lastStatus, item => {
      //     if (_.includes(consts.WITHDRAW_STATUS_FAILURE, item.status)) {
      //       // this.checkStep = true;
      //       this.checkStep = 2;
      //       this.isError = true;
      //     }else if (_.includes(consts.WITHDRAW_STATUS_SUCCESS, item.status)) {
      //       // this.checkStep = true;
      //       this.checkStep = 2;
      //     }
      //   });
      // },
      getInfo() {
        // let orderNum=this.lastStatus.length;
        let isAuditing =  _.filter(this.lastStatus,function(val){
          return consts.WITHDRAW_STATUS_AUDIT_ING.indexOf(val.status) > -1 ||  consts.WITHDRAW_STATUS_PAYMENT_OUT_ING.indexOf(val.status) > -1
        })
        // let isFail =  _.filter(this.lastStatus,function(val){
        //   return consts.WITHDRAW_STATUS_FAILURE.indexOf(val.status) > -1
        // })
        // let isSuccess =  _.filter(this.lastStatus,function(val){
        //   return consts.WITHDRAW_STATUS_SUCCESS.indexOf(val.status) > -1
        // })
        this.checkStep = isAuditing.length > 0  ? 1 : 2;
      },
      showtime() {
        this.s = this.s - 1;
        if (this.s === 0 && this.m !== 0) {
          this.m = this.m - 1;
          this.s = 60;
        }

        if (this.s === 0 && this.m === 0) {
          clearInterval(this.settime);
          this.resetCountDown();
        }
      },
      startCountDown() {
        this.settime = setInterval(this.showtime, 1000);
      },
      resetCountDown() {
        this.m = 4;
        this.s = 59;
        this.startCountDown();
      },
      withdrawStatus(value) {
        if (_.includes([...consts.WITHDRAW_STATUS_PAYMENT_OUT_ING, ...consts.WITHDRAW_STATUS_AUDIT_ING], value)) {
          return '<span style="color: #54c262;">处理中</span>';
        } else if (_.includes(consts.WITHDRAW_STATUS_SUCCESS, value)) {
          return '<span style="color: #1E5ADC;">成功</span>';
        } else {
          return '<span style="color: red;">失败</span>';
        }
      },
    },

    computed: {
    //   currentStep() {
    //     // _.find(this.lastStatus,function (val) {
    //     //   return [1].indexOf(val.status) > -1
    //     // });
    //     //风控审核
    //     if (_.includes(consts.WITHDRAW_STATUS_AUDIT_ING, this.lastStatus[0].status)) {
    //       return 0;
    //       //出款中
    //     } else if (_.includes(consts.WITHDRAW_STATUS_PAYMENT_OUT_ING, this.lastStatus[0].status)) {
    //       return 1;
    //       //提现拒绝
    //     } else if (_.includes(consts.WITHDRAW_STATUS_FAILURE, this.lastStatus[0].status)) {
    //       this.isError = true;
    //       return 2;
    //       //提现成功
    //     } else if (_.includes(consts.WITHDRAW_STATUS_SUCCESS, this.lastStatus[0].status)) {
    //       return 2;
    //       //未知状态码上报sentry
    //     } else {
    //       throw new Error(`未知提现状态码:${this.lastStatus[0].status}`);
    //     }
    //   }
      allAmount() {
        return _.reduce(this.lastStatus,(sum,item) => {
          return sum + item.amount;
        },0);
      },
      formatStatus() {
        let html = '';
        const pending = _.filter(this.lastStatus,(item) => {
          return _.includes([...consts.WITHDRAW_STATUS_PAYMENT_OUT_ING, ...consts.WITHDRAW_STATUS_AUDIT_ING], item.status);
        });
        const fail = _.filter(this.lastStatus,(item) => {
          return _.includes(consts.WITHDRAW_STATUS_FAILURE, item.status);
        });
        if(fail.length > 0){
          html = '<span style="color: red;">失败</span>';
        }
        if(pending.length > 0){
          html = '<span style="color: #54c262;">处理中</span>';
        }
        if(fail.length === 0 && pending.length === 0){
          html = '<span style="color: #1E5ADC;">成功</span>';
        }
        return html;
      },
      allFee() {
        return _.reduce(this.lastStatus,(sum,item) => {
          return sum + item.fee;
        },0);
      }
    },

    mounted() {
      // if (this.lastStatus.status === 2) {
      //   this.successDirect = true;
      // }
      _.each(this.lastStatus, (item) => {
        if (item.status != 2) {
          this.successDirect = false;
        }
      })
      this.timer = setInterval(() => {
        this.$emit('refresh-status');
      }, 3000);
      this.startCountDown();
    },
    beforeDestroy() {
      clearInterval(this.settime);
      clearInterval(this.timer);
    }
  };
</script>

<style lang="scss">
  $--border-color: $--border-color-base;

  @include b(withdraw-progress) {

    @include e(tip) {
      margin-top: 20px;
      height: 63px;
      line-height: 63px;
    }

    @include e(tip-inner) {
      display: flex;
    }

    @include e(tip-text) {
      flex: 1 0 0;
    }

    @include e(countdown) {
      display: inline-block;
      text-align: center;
      font-weight: bold;
      font-size: 28px;
      color: $--color-black;
      margin-left: 10px;

      .svg-icon {
        width: 24px;
        height: 24px;
      }

    }

    @include e(steps) {
      height: 134px;
      background: rgba(251, 251, 251, 1);
      width: 623px;
      box-sizing: border-box;
      margin-bottom: 40px;

      padding-top: 30px;

      border-top: 1px solid #dedede;
      border-bottom: 1px solid #dedede;
      /*display: flex;*/
      /*align-items: center;*/
      /*justify-content: center;*/
    }

    @include e(step) {
      background-color: $--color-primary;
      width: 38px;
      height: 38px;
      border-radius: $--border-radius-circle;
      display: flex;
      align-items: center;
      justify-content: center;

      .svg-icon {
        width: 22px;
        height: 22px;
      }
    }

    /*@include e(order) {
      display: flex;
      flex-flow: wrap;
      padding-bottom: 30px;
      margin-bottom: 36px;
      border-bottom: 1px solid $--border-color-base;
    }
    @include e(order-cell) {
      flex: 50% 0 0;
      margin-bottom: 18px;
    }*/
    @include e(order) {
      padding-bottom: 30px;
      margin-bottom: 30px;
    }
    @include e(all-order){
      cursor: pointer;
      padding: 20px;
      border: 1px solid $--border-color-base;
      border-radius: 8px;
      position: relative;
      margin-bottom: 20px;
    }
    @include e(all-more){
      position: absolute;
      top: 50%;
      right: 2%;
      color: #1E5ADC;
      transform: translate(0,-50%);
      span{
        width: 14px;
        display: inline-block;
        writing-mode: vertical-lr;
      }
    }
    @include e(all-icon){
      transform: rotate(-90deg);
      vertical-align: top;
      margin-top: 22px;
      margin-left: 5px;
    }
    @include e(all-order-cell){
      line-height: 30px;
      span{
        margin-right: 50px;
      }
    }
    @include e(order-info) {
      span {
        color: $--color-danger;
      }
    }
    @include e(order-list) {
      padding-top: 20px;
      padding-bottom: 10px;
      display: -webkit-box;
      overflow-y: hidden;
      overflow-x: scroll;
      -webkit-overflow-scrolling: touch;
      &::-webkit-scrollbar {
        height: 8px;
      }
      &::-webkit-scrollbar-track {
        background-color: rgba(251, 251, 251, 1);
        border-radius: 4px;
      }
      &::-webkit-scrollbar-thumb {
        background-color: $--border-color-base;
        border-radius: 4px;
      }
    }
    @include e(order-item) {
      display: flex;
      flex-flow: wrap;
      border: 1px solid $--border-color-base;
      border-left: 8px solid $--border-color-base;
      border-radius: 8px;
      padding: 10px;
      margin-right: 20px;
    }
    @include e(order-cell) {
      flex: 50% 0 0;
      line-height: 30px;
      /*margin-bottom: 18px;*/
    }

    @include e(customer) {
      display: flex;
      flex-flow: column;
      align-items: center;
      font-size: 16px;
      margin-bottom: 20px;

      .svg-icon {
        width: 17px;
        height: 16px;
      }
    }
    @include e(customer-btn) {
      font-size: $--font-size-base;
      color: $--color-primary;
      margin-top: 8px;
      .svg-icon {
        width: 17px;
        height: 16px;
      }
    }
  }

</style>